<template>
  <common-card title="今日订单" :value="orderToday|numberFormat">
    <!-- <div ref="chart" style="width: 100%;height:100%;"></div> -->
     <v-chart :option="getOption()" autoresize/>
    <template #bottom>
      <span>昨日订单量</span>
      <span class="emphasis">{{orderLastDay|numberFormat}}</span>
    </template>
  </common-card>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'TodayOrders',

  computed: {
    ...mapState({
      "orderToday": state => state.data.reportData.orderToday,
      "orderLastDay": state => state.data.reportData.orderLastDay,
      "orderTrend": state => state.data.reportData.orderTrend||[],
      "orderTrendAxis": state => state.data.reportData.orderTrendAxis||[]
    })
  },

  // watch: {
  //   orderTrend () { // 数据来了
  //     // 重新设置图表的option
  //     this.chart.setOption(this.getOption())
  //   }
  // },

  // mounted() {
  //   // 创建图表对象
  //   this.chart = this.$echarts.init(this.$refs.chart)
  //   // 生成一个配置对象并设置
  //   this.chart.setOption(this.getOption())

  //   // 监视窗口的size变化
  //   window.addEventListener('resize', () => {
  //     // 让图表根据当前size显示
  //     this.chart.resize()
  //   })

  // },

  methods: {
    getOption () {
      return {
      // x轴
      xAxis: {
        boundaryGap: false, // 两侧不留白
        show: false,
        data: this.orderTrendAxis
      },
      // y轴
      yAxis: {
        show: false,
      },
      // 系列
      series: {
        name: '实时订单数',
        type: 'line',
        data: this.orderTrend,
        smooth: true, // 平滑的线
        itemStyle: {
          opacity: 0  // 隐藏点
        },
        areaStyle: { // 填充颜色

        },
        lineStyle: {
          opacity: 0  // 隐藏线
        }
      },
      // 容器的位置
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
      color: '#A64CA6',
      // 提示框
      tooltip: {
        trigger: 'axis',
        // confine: true, // 将 tooltip 框限制在图表的区域内  有点问题, 显示在鼠标下面不太好
        // 指定提示框的位置
        position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角为原点，x轴向右，y轴向下

          // x坐标位置
          let x = 0;
          // 当前鼠标X轴位置
          let pointX = point[0];
          // 提示框的宽度
          let boxWidth = size.contentSize[0];
          // boxWidth > pointX 说明鼠标左边放不下提示框
          if (boxWidth > pointX) {
            x = 5;
          } else { // 左边放的下
            x = 5 + pointX - boxWidth;
          }
          // 返回左上角的x和y坐标值
          return [x, -40];
        }
      }
    }
    }
  }
}
</script>

<style scoped>

</style>
